/**
 * Created by wyh on 2018/8/2.
 */
ol.control.MapSwitch = function (opt_options) {
    var options = opt_options || {};
    var this_ = this;
    this.mapListeners = [];


    ol.control.MapSwitch.prototype.setMap = function(map) {
        // Clean up listeners associated with the previous map
        for (var i = 0; i < this.mapListeners.length; i++) {
            ol.Observable.unByKey(this.mapListeners[i]);
        }
        this.mapListeners.length = 0;
        // Wire up listeners etc. and store reference to new map
        ol.control.Control.prototype.setMap.call(this, map);
        if (map) {
            var this_ = this;
            this.mapListeners.push(map.getLayerGroup().on('change', this.initbtn, this));
        }

    };


    ol.control.MapSwitch.prototype.initbtn = function () {
       // alert('切换');
    }


    var onbtnYXClick = function () {

        //先得到groupLayer，再在grouplayer里得到具体的layer,第一个groupLayer是底图，第二个groupLayer是业务图层
        var groupLayers = map.getLayers().getArray();
        var layers = groupLayers[0].getLayers().getArray();
        var vecBaseLayer = null;
        var imgBaseLayer = null;
        var ywlBaseLayer = null;
        for (var i = 0; i < layers.length; i++) {
            var dics = layers[i].getProperties();
            if (dics["title"] == "天地图影像") {
                imgBaseLayer = layers[i];
            }
            if (dics["title"] == "天地图矢量") {
                vecBaseLayer = layers[i];
            }
            if (dics["title"] == "午夜蓝") {
                ywlBaseLayer = layers[i];
            }
        }
        vecBaseLayer.setVisible(false);
        imgBaseLayer.setVisible(true);
        ywlBaseLayer.setVisible(false);
    };
    var onbtnSLClick = function () {

        //先得到groupLayer，再在grouplayer里得到具体的layer,第一个groupLayer是底图，第二个groupLayer是业务图层
        var groupLayers = map.getLayers().getArray();
        var layers = groupLayers[0].getLayers().getArray();
        var vecBaseLayer = null;
        var imgBaseLayer = null;
        var ywlBaseLayer = null;
        for (var i = 0; i < layers.length; i++) {
            var dics = layers[i].getProperties();
            if (dics["title"] == "天地图影像") {
                imgBaseLayer = layers[i];
            }
            if (dics["title"] == "天地图矢量") {
                vecBaseLayer = layers[i];
            }
            if (dics["title"] == "午夜蓝") {
                ywlBaseLayer = layers[i];
            }
        }
        vecBaseLayer.setVisible(true);
        imgBaseLayer.setVisible(false);
        ywlBaseLayer.setVisible(false);
    };
    var onbtnWYLClick = function () {

        //先得到groupLayer，再在grouplayer里得到具体的layer,第一个groupLayer是底图，第二个groupLayer是业务图层
        var groupLayers = map.getLayers().getArray();
        var layers = groupLayers[0].getLayers().getArray();
        var vecBaseLayer = null;
        var imgBaseLayer = null;
        var ywlBaseLayer = null;
        for (var i = 0; i < layers.length; i++) {
            var dics = layers[i].getProperties();
            if (dics["title"] == "天地图影像") {
                imgBaseLayer = layers[i];
            }
            if (dics["title"] == "天地图矢量") {
                vecBaseLayer = layers[i];
            }
            if (dics["title"] == "午夜蓝") {
                ywlBaseLayer = layers[i];
            }
        }
        vecBaseLayer.setVisible(false);
        imgBaseLayer.setVisible(false);
        ywlBaseLayer.setVisible(true);
    };


    //通过js添加要素，样式文件统一在CusControls.css文件管理
    var element = document.createElement('div');
    element.setAttribute("id", "divMapSwitch");

    var btnSL = document.createElement("BUTTON");
    btnSL.textContent = "矢量";
    btnSL.setAttribute("id", "btnSL");
    var btnYX = document.createElement("BUTTON");
    btnYX.textContent = "影像";
    btnYX.setAttribute("id", "btnYX");
    var btnWYL = document.createElement("BUTTON");
    btnWYL.textContent = "午夜蓝";
    btnWYL.setAttribute("id", "btnWYL");

    element.appendChild(btnSL);
    element.appendChild(btnYX);
    element.appendChild(btnWYL);

    //这个css是必须的，只要是openlayers的自定义控件都要这样做
    element.className = 'ol-unselectable ol-control';
    //默认是矢量图，所以这里是影像图
    /* element.style.cssText ="background:url(img/yingxiang.png);width:75px;height:75px;bottom:5px;right:5px;";*/
    btnYX.addEventListener('click', onbtnYXClick, false);
    btnSL.addEventListener('click', onbtnSLClick, false);
    btnWYL.addEventListener('click', onbtnWYLClick, false);

    ol.control.Control.call(this, {
        element: element,
        target: options.target
        /*target: document.body*/


    });

};
ol.inherits(ol.control.MapSwitch, ol.control.Control);